<template>
  <div class="all-icon">
      <div class="wrapper" ref="wrapper">
          <ul class="icon-bg">
              <div v-for="(item,index) in data" :key="index">
                  <li class="icon-item">
                      <img class="icon-img" :src="item.iconUrl">
                      <span class="item-text">{{item.name}}</span>
                  </li>
              </div> 
          </ul>
      </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  data(){
    return{
      data:[],
    }
  },
  created(){
    this.getData()
  },
  methods:{
    getData(){
      // 网络数据请求
      this.$request('get','/homepage/dragon/ball').then((res)=>{
        console.log(res);
        this.data=res.data;

        // 轮播图
        this.$nextTick(()=>{
        this.scroll = new BScroll(this.$refs.wrapper,{
          startX:0,
          scrollX:true,
          scrollY:false,
        });     
      });   
      })
    },
  },
}
</script>

<style>
.all-icon{
    display: flex;
    flex-direction: row;
        width: 414px;
    height: 100px;
    margin: auto;
    /* border: 0.5px solid #e7e7e7; */
    border-radius: 10px;
    box-shadow:0px 0px 3px 3px#e9e7e7;
    background-color: rgb(255, 255, 255);
}
.icon-bg{
    display: flex;
    flex-direction: row;
    width: calc(9*60px);
    height: 150px;
}
  .wrapper{
  /* 容器的宽度就是屏幕的宽度 */
    width: 414px;
    overflow: hidden;

}
.icon-item{
    width: 60px;
    height: 150px;
        margin: auto;
}
.icon-img{
    width: 40px;
    height: 40px;
    margin: 10px;
    background-color: pink;
    border-radius: 50%;
}
.item-text{
    font-size: 10px;
}
</style>